<template>
  <div class="photoinfo-container">
    <h3 class="info-title">{{photoinfo.title}}</h3>
    <p class="info-subtitle">
      <span>发表时间：{{photoinfo.add_time | dateFormat}}</span>
      <span>点击：{{photoinfo.click}}次</span>
    </p>
    <hr />
    <!--缩略图区域-->
    <div class="thumbs">
      <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
    </div>
    <!--文字描述区域-->
    <div class="content" v-html="photoinfo.content"></div>
    <!--评论区域-->
    <cmt-box :id="this.id"></cmt-box>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import comment from "../subcomponent/comment.vue"; //导入评论组件
export default {
  data() {
    return {
      id: this.$route.params.id,
      photoinfo: {}, // 图片详情
      slide1: [], //缩略图的数组
    };
  },
  created() {
    this.getPhotoInfo();
    this.getThunms()
  },
  methods: {
    getPhotoInfo() {
      this.$http
        .get("http://api.cms.liulongbin.top/api/getimageInfo/" + this.id)
        .then((result) => {
          if (result.data.status === 0) {
            this.photoinfo = result.data.message[0];
          } else {
            Toast("图片信息获取失败！");
          }
        });
    },

    getThunms() {
      this.$http
        .get("http://api.cms.liulongbin.top/api/getthumimages/" + this.id)
        .then((result) => {
          if (result.data.status === 0) {

            result.data.message.forEach(item =>{
              item.w = 600 ;
              item.h = 400;
              item.msrc=item.src
            });
            this.slide1 = result.data.message;
          } else {
            Toast("图片信息获取失败！");
          }
        });
    },
    handleClose() {
      console.log("close event");
    },
  },
  components: {
    cmtBox: comment,
  },
};
</script>

<style lang="scss" scoped>
.photoinfo-container {
  .info-title {
    font-size: 15px;
    color: #26a2ff;
    text-align: center;
    padding: 10px 0px;
  }
  .info-subtitle {
    display: flex;
    justify-content: space-between;
  }
  .content {
    line-height: 200%;
    font-size: 15px;
    color: black;
    text-align: left;
  }
    .thumbs {
            /deep/ .my-gallery {
                display: flex;
                flex-wrap: wrap;
                figure {
                    width: 30%;
                    margin: 5px;
                    img {
                        width: 100%;
                    }
                }
            }
        }
}
</style>